<template>
  <div style="display: flex; height: 100%">
    <!-- 图标 -->
    <div style="width: 100%; border: 1px solid #ece6e6; height: 700px">
      <div ref="chart" style="width: 1000px; height: 700px"></div>
    </div>
  </div>
</template>

<script>
// 引入ECharts主模块
import * as echarts from "echarts";
import _ from "lodash";
import { getGraph } from "@/api/system/info";
export default {
  name: "relationship",
  props: {
    ID: {
      type: String,
      default: "",
    },
    userName: {
      type: String,
      default: "",
    },
    queryParams: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {};
  },

  mounted() {
    this.queryData({});
  },
  methods: {
    queryData(params) {
      getGraph(params).then((res) => {
        if (res.code == 200) {
          this.handleData(res.data);
        } else {
          this.$message.error("获取用户数据失败！");
        }
      });
    },
    handleData(graph) {
      this.initEcharts(graph);
    },
    initEcharts(graph) {
      var myChart = echarts.init(this.$refs.chart);
let imageObject = {
  "摄像头ip":"image://",
  "品牌":"image://",
  "类型":"image://",
  "端口":"image://",
  "脆弱点":"image://",
  "漏洞类型":"image://",
  "影响范围":"image://",
  "危害等级":"image://",
  "利用方法":"image://",

}
      let option = {
        title: {},
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (params.dataType === "node") {
              return `${params.name}<br>:${params.data.value || "无"}`;
            }
            return "";
          },
        },
        legend: [
          {
            data: graph.categories.map(function (a) {
              return a.name;
            }),
          },
        ],
        animationDuration: 1000,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            legendHoverLink: false,
            layout: "force",
            data: graph.nodes.map((node) => ({
              ...node,
              symbol:imageObject[node.name],
              symbolSize: [15, 15],
            })),
            links: graph.links,
            categories: graph.categories,
            roam: true,
            zoom: 3.5,
            label: {
              show: true,
              position: "right",
              fontSize: 14,
            },
            lineStyle: {
              color: "source",
              curveness: 0.2,
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10,
              },
            },
          },
        ],
      };

      myChart.setOption(option);
      myChart.on("click", (params)=> {
        if(params.data.name=='摄像头ip'){
          //触发父组件的事件
          this.$emit("clickCamera", params.data.id);
        }
      });
    },
  },
};
</script>

<style scoped>
/* 你可以在这里添加一些CSS样式 */
</style>
